<template>
    <view class="container">
        <view class="mood-selector">
            <text class="section-title">今天的心情</text>
            <view class="mood-levels">
                <view 
                    v-for="level in moodLevels" 
                    :key="level.value"
                    class="mood-level-item"
                    :class="{'level-1': level.value === 1, 'level-2': level.value === 2, 'selected': selectedMoodLevel === level.value }"
                    @tap="selectMoodLevel(level.value)"
                >
                    <text>{{ level.label }}</text>
                </view>
            </view>
        </view>

        <view class="mood-description">
            <text class="section-title">心情描述</text>
            <textarea 
                v-model="moodDescription" 
                placeholder="记录下今天的感受..."
                maxlength="500"
            ></textarea>
        </view>

        <view class="mood-media">
            <text class="section-title">添加图片/语音</text>
            <view class="media-actions">
                <button 
                    class="media-btn" 
                    @tap="chooseImage"
                >
                    <text class="iconfont icon-image">&#xe603;</text>
                    图片
                </button>
                <button 
                    class="media-btn" 
                    @tap="recordVoice"
                >
                    <text class="iconfont icon-voice">&#xe604;</text>
                    语音
                </button>
            </view>

            <view class="media-preview" v-if="uploadedImages.length > 0">
                <view 
                    v-for="(image, index) in uploadedImages" 
                    :key="index" 
                    class="image-item"
                >
                    <image :src="image" mode="aspectFill"></image>
                    <text 
                        class="delete-icon" 
                        @tap="deleteImage(index)"
                    >×</text>
                </view>
            </view>

            <view class="voice-preview" v-if="recordedVoice">
                <text>{{ recordedVoice.duration }}″</text>
                <button 
                    class="play-btn" 
                    @tap="playVoice"
                >
                    播放
                </button>
                <button 
                    class="delete-btn" 
                    @tap="deleteVoice"
                >
                    删除
                </button>
            </view>
        </view>

        <button 
            class="submit-btn" 
            @tap="submitMoodRecord"
            :disabled="!canSubmit"
        >
            保存心情
        </button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            moodLevels: [
                { value: 1, label: '非常糟糕' },
                { value: 2, label: '糟糕' },
                { value: 3, label: '一般' },
                { value: 4, label: '好' },
                { value: 5, label: '非常好' }
            ],
            selectedMoodLevel: null,
            moodDescription: '',
            uploadedImages: [],
            recordedVoice: null
        }
    },
    computed: {
        canSubmit() {
            return this.selectedMoodLevel && this.moodDescription.trim()
        }
    },
    methods: {
        selectMoodLevel(level) {
            this.selectedMoodLevel = level;
        },
        chooseImage() {
            uni.chooseImage({
                count: 9 - this.uploadedImages.length,
                sourceType: ['album', 'camera'],
                success: async (res) => {
                    try {
                        const uploadPromises = res.tempFilePaths.map(filePath => 
                            this.$api.upload.uploadImage(filePath)
                        );
                        const uploadedUrls = await Promise.all(uploadPromises);
                        this.uploadedImages = [...this.uploadedImages, ...uploadedUrls];
                    } catch (error) {
                        uni.showToast({
                            title: '图片上传失败',
                            icon: 'none'
                        });
                    }
                }
            });
        },
        deleteImage(index) {
            this.uploadedImages.splice(index, 1);
        },
        recordVoice() {
            uni.startRecord({
                success: () => {
                    uni.stopRecord({
                        success: (res) => {
                            this.recordedVoice = {
                                tempFilePath: res.tempFilePath,
                                duration: Math.floor(res.duration / 1000)
                            };
                        }
                    });
                }
            });
        },
        playVoice() {
            if (this.recordedVoice) {
                uni.playVoice({
                    filePath: this.recordedVoice.tempFilePath
                });
            }
        },
        deleteVoice() {
            this.recordedVoice = null;
        },
        async submitMoodRecord() {
            if (!this.canSubmit) {
                uni.showToast({
                    title: '请选择心情等级并填写描述',
                    icon: 'none'
                });
                return;
            }

            try {
                const moodRecord = {
                    moodLevel: this.selectedMoodLevel,
                    description: this.moodDescription,
                    images: this.uploadedImages,
                    voice: this.recordedVoice ? await this.$api.upload.uploadVoice(this.recordedVoice.tempFilePath) : null
                };

                await this.$api.mood.createMoodRecord(moodRecord);

                uni.showToast({
                    title: '心情记录成功',
                    icon: 'success',
                    success: () => {
                        setTimeout(() => {
                            uni.switchTab({
                                url: '/pages/home/index'
                            });
                        }, 1500);
                    }
                });
            } catch (error) {
                uni.showToast({
                    title: '心情记录失败',
                    icon: 'none'
                });
            }
        }
    }
}
</script>

<style scoped>
.container {
    background-color: #F8F8F8;
    padding: 24px;
    height: 100vh;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: block;
}

.mood-levels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.mood-level-item {
    flex: 1;
    text-align: center;
    padding: 12px;
    background-color: white;
    border-radius: 8px;
    margin: 0 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mood-level-item.selected {
    background-color: #1AAD19;
    color: white;
}

textarea {
    width: 100%;
    min-height: 150px;
    background-color: white;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.media-actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.media-btn {
    flex: 1;
    margin: 0 8px;
    background-color: white;
    color: #1AAD19;
    border: none;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.media-btn .iconfont {
    margin-right: 8px;
    font-size: 20px;
}

.media-preview {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.image-item {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 8px;
}

.image-item image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.delete-icon {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-preview {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.voice-preview button {
    margin-left: 12px;
    padding: 8px 16px;
    border-radius: 20px;
}

.submit-btn {
    width: 100%;
    background-color: #1AAD19;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 32px;
    font-size: 16px;
}

.submit-btn:disabled {
    background-color: #cccccc;
}
</style> 